<template>
	<view>
		<view class="container2">
			<uni-easyinput class="input-box" @focus="showDropdown" @input="guolv" @blur="hideDropdown2"
				placeholder="选择强化物" v-model="data" @clear="hideDropdown" style="">
			</uni-easyinput>
			<view class="floating-div" :class="{ show: isDropdownVisible }">
				<scroll-view scroll-y="true" class="" style="height: 200rpx;">
					<view v-for="item in list" @tap.stop="select(item)" style="border-bottom: 1px solid #e9e9e9;">
						<view style="padding: 10rpx 0px;">
							{{item}}
						</view>

					</view>
				</scroll-view>

			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * Easyinput 输入框
	 * @description 此组件可以实现表单的输入与校验，包括 "text" 和 "textarea" 类型。
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3455
	 * @property {String}	data	输入的内容 非必须
	 * @property {String}	list	待选择的数据list 目前仅支持 一维数组 [1,2,3,...]
	 * @event {Function}	change	选择的数据
	 * 
	 */
	export default {
		name: "selectInput",
		props: {
			data: {
				type: String,
				default: () => []
			},
			list: {
				list: Array,
				default: () => []
			},
		},
		data() {
			return {
				list2: null,
				isDropdownVisible: false,
			};
		},
		watch: {
			data(newValue) {
				if (newValue !== this.data) { // 仅在值变化时更新
					this.data = Object.assign({}, newValue); // 当 prop data 变化时更新 currentData

				}
			},
			list(newValue) {
				if (newValue !== this.list) { // 仅在值变化时更新
					this.list = Object.assign({}, newValue); // 当 prop data 变化时更新 currentData
					if (this.list2 == null) {
						this.list2 = JSON.parse(JSON.stringify(this.list))
					}
				}
			},
		},
		created() {
			if (this.list2 == null) {
				this.list2 = JSON.parse(JSON.stringify(this.list))
			}
		},
		methods: {
			guolv(e) {
				if (this.isNull(e)) {
					this.list = JSON.parse(JSON.stringify(this.list2))

				} else {

					this.list = this.list.filter(item => item.includes(e))
					//新建元素
					if (this.list.length == 0) {
						this.list.push(e)
					}
				}

			},
			select(data) {
				this.data = data
				this.hideDropdown()
				this.$emit("change", data)

			},
			showDropdown() {

				this.isDropdownVisible = true;
			},
			hideDropdown2() {
				if (this.isNull(this.data)) {
					this.hideDropdown()
				}
			},
			hideDropdown() {
				setTimeout(() => {
					this.isDropdownVisible = false;
					this.list = JSON.parse(JSON.stringify(this.list2))
				}, 200);



			},
			isNull(val) {
				/**
				 * 判断是否为空
				 *  val
				 * @returns
				 */
				return (
					val === undefined ||
					val == null ||
					val === "" ||
					val === "" ||
					val === "undefined" ||
					val === "null" ||
					val === "NULL"
				);
			}
		}
	}
</script>

<style>
	.floating-div {
		position: absolute;
		/* 绝对定位 */
		top: 100%;
		/* 在输入框下方 */
		left: 0;
		/* 对齐左侧 */
		width: 100%;

		/* 宽度与输入框一致 */
		background-color: white;
		/* 背景颜色 */
		border: 1px solid #ccc;
		/* 边框 */
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		/* 阴影效果 */
		display: none;
		padding: 10rpx;
		/* 默认隐藏 */
	}

	.floating-div.show {
		display: block;
		/* 显示悬浮 div */
	}

	.container2 {
		position: relative;
		/* 使子元素可以相对于此元素定位 */
		/* width: 200px; */
		/* 容器宽度 */
		margin: 0px 20rpx;
		/* 外边距 */
	}

	.input-box {
		width: 100%;
		/* 输入框宽度 */
		/* padding: 8px; */
		/* 内边距 */
		box-sizing: border-box;
		/* 包含内边距和边框 */
	}
</style>